<script setup>
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { resetRouter } from '@/router'
import { useRouter } from 'vue-router'
import { useStorage } from '@/hooks/web/useStorage'
import { useLockStore } from '@/store/modules/lock'
import { useI18n } from '@/hooks/web/useI18n'
import { useNow } from '@/hooks/web/useNow'
import { useDesign } from '@/hooks/web/useDesign'
import Icon from '@/components/common/Icon'
import { loginOutApi } from '@/apis/login'
import { useTagsViewStore } from '@/store/modules/tagsView'

const tagsViewStore = useTagsViewStore()
const { clear } = useStorage()
const { replace } = useRouter()
const lockStore = useLockStore()
const { hour, month, minute, meridiem, year, day, week } = useNow(true)
const { t } = useI18n()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('lock-page')

// 页面状态
const password = ref('')
const loading = ref(false)
const errMsg = ref(false)
const showDate = ref(true)
const passwordInputRef = ref(null)

// 解锁方法
const unLock = async () => {
  if (!password.value) return
  const pwd = password.value
  try {
    loading.value = true
    const res = await lockStore.unLock(pwd)
    errMsg.value = !res
  } finally {
    loading.value = false
  }
}

// 返回登录
const goLogin = async () => {
  const res = await loginOutApi().catch(() => {})
  if (res) {
    clear()
    tagsViewStore.delAllViews()
    resetRouter()
    lockStore.resetLockInfo()
    replace('/login')
  }
}

// 显示密码输入
const handleShowForm = (show = false) => {
  showDate.value = show
  if (!show) {
    requestAnimationFrame(() => {
      passwordInputRef.value?.focus()
    })
  }
}
</script>
<template>
  <div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center">
    <!-- 点击锁图标显示解锁框 -->
    <div
      :class="`${prefixCls}__unlock`"
      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
      @click="handleShowForm(false)"
      v-show="showDate"
    >
      <Icon icon="vi-ep:lock" />
      <span>{{ t('lock.unlock') }}</span>
    </div>

    <!-- 中心时钟 -->
    <div class="flex w-screen h-screen justify-center items-center">
      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
        <span>{{ hour }}</span>
        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">{{ meridiem }}</span>
      </div>
      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5`">
        <span>{{ minute }}</span>
      </div>
    </div>

    <!-- 解锁输入框 -->
    <transition name="fade-slide">
      <div :class="`${prefixCls}-entry`" v-show="!showDate">
        <div :class="`${prefixCls}-entry-content`">
          <div class="flex flex-col items-center">
            <img src="@/assets/imgs/avatar.jpg" alt="" class="w-70px h-70px rounded-[50%]" />
            <span class="text-14px my-10px text-[var(--logo-title-text-color)]">Archer</span>
          </div>
          <ElInput
            type="password"
            :placeholder="t('lock.placeholder')"
            class="enter-x"
            v-model="password"
            @keydown.enter="unLock"
            ref="passwordInputRef"
          />
          <span v-if="errMsg" :class="`text-14px ${prefixCls}-entry__err-msg enter-x`">
            {{ t('lock.message') }}
          </span>
          <div :class="`${prefixCls}-entry__footer enter-x`">
            <BaseButton
              type="primary"
              size="small"
              class="mt-2 mr-2 enter-x"
              link
              :disabled="loading"
              @click="handleShowForm(true)"
            >
              {{ t('common.back') }}
            </BaseButton>
            <BaseButton
              type="primary"
              size="small"
              class="mt-2 mr-2 enter-x"
              link
              :disabled="loading"
              @click="goLogin"
            >
              {{ t('lock.backToLogin') }}
            </BaseButton>
            <BaseButton
              type="primary"
              class="mt-2"
              size="small"
              link
              :disabled="loading"
              @click="unLock"
            >
              {{ t('lock.entrySystem') }}
            </BaseButton>
          </div>
        </div>
      </div>
    </transition>

    <!-- 底部显示时间日期 -->
    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
      </div>
      <div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
    </div>
  </div>
</template>
